このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

前回の

HTML5 Webストレージでデータを保存 その5（なんちゃってソーシャルゲーム・Lv、Gold編）

の続きとなります。

今回はいよいよ本題へと。

その前に、現在、クリックするとクエスト進捗、exの値が10づつ増えていく固定の数値となっておりますのでこれを少しばらします。

クエスト進捗 ex調整

クエスト進捗の設定の為、新たに setQuestVal関数とexの設定の為 setExVal関数を用意します。

その為、「現在のクエストステージ」の数値を使いそれぞれの値を算出したいため、新たにstageVal変数を用意します。

stageVal = 1;

クエスト進捗の値は、現在いるステージ数を基にします。100%をステージ数で割り、更に4で割った数値を1回クリックする度に得られる（進む）数値とします。こうすることによって、ステージを進むにつれて進むのが困難になってきます。

scriptで書きますと

Math.floor((100/stageVal)/4);

こんな感じですね。この数値をaddQuestValとし、現在の進捗の値に増加します。

数値によって100%を超えてしまうので、100を超える数値に関しては100とするように記述します。

function setQuestVal() {
  var addQuestVal = Math.floor((100/stageVal)/4);
  questVal += addQuestVal;
  if(questVal >= 100){ questVal = 100;}
}

questVal += 10;としていた箇所をこの関数を呼び出すようにします。

setQuestVal();

exもクエスト進捗同様なのですが、exに関してはlvの値を基準とします。100で現在のLvで割り、更に5で割ります。その数値をaddExValとして現在のexの値に増加します。

function setExVal(){
  var addExVal = Math.floor((100/lv)/5);
  exVal += addExVal;
  if(exVal >= 100){ exVal = 100;}
}

こちらも同様 exVal += 10;としていたところにsetExValを呼び出すようにします。

setExVal();

こうすることによって、少しバラつき感が出てゲームっぽくなったかと思います。

ここまでのデモページは以下のリンクから。

デモページ

http://webcyou.com/demo/js/webstorage/index007.html

localStorageを複数保存

いやぁ。長かったぁ。。。

やっと本題に入る気がします。。

localStorageを一つのキーに一つのデータしか保存できないのですが、（オブジェクトとしての保存は出来ず、テキストデータの保存となるため）今回は複数保存を行ってみたいと思います。

複数扱う場合はJSON（リテラル）形式で保存致します。

var gameData = {
  lv:lv,
  questVal:questVal,
  exVal:exVal,
  gold:gold,
  stageVal:stageVal
}

このような感じでgameDataオブジェクトを用意し、localStorageに保存する際、JSON.stringify()関数を用いてJavaScriptオブジェクトをJSON文字列に一旦変換してlocalStorageに保存します。

JSON.stringify(data));

今回の場合だとこのような感じになります。

localStorage.setItem('LS_Data',JSON.stringify(gameData));

今度、localStorageから呼び出す場合はJSON.parse()関数を用いて、呼び出したJSON文字列を JavaScriptオブジェクトに変換して使用します。

JSON.parse

今回の場合だとこのような感じになります。

lSGameData = JSON.parse(localStorage.getItem("LS_Data")

それぞれのプロパティにアクセスする際は通常どおり「.」を使いアクセスできます。

lv = lSGameData.lv;

今回の場合だとこのような感じになります。

 lv = lSGameData.lv;
 questVal = lSGameData.questVal;
 exVal = lSGameData.exVal;
 gold = lSGameData.gold;
 stageVal = lSGameData.stageVal;
 lvElem.innerHTML = lv;

localStorageに保存するsetStorage関数を作成し、クリックされたイベント内にこの関数を呼び出します。

よってクリックする度にlocalStorageに保存されることになります。

function setStorage(){
  var gameData = {
    lv:lv,
    questVal:questVal,
    exVal:exVal,
    gold:gold,
    stageVal:stageVal
  }
  localStorage.setItem('LS_Data',JSON.stringify(gameData));
}

ページを開いたときに実行されるgame関数の初期値の場所に呼び出しの変数と、localStorageのデータの有無を確認し、ある場合はそれぞれの値をセットします。

if(lSGameData !== null){
  lv = lSGameData.lv;
  questVal = lSGameData.questVal;
  exVal = lSGameData.exVal;
  gold = lSGameData.gold;
  stageVal = lSGameData.stageVal;
  lvElem.innerHTML = lv;
}

それら、もろもろを含めたscriptは以下のとおりとなります。

function game(){
  var btn = document.querySelector('.btn'),
      questImg = document.querySelector('.questImg'),
      img = questImg.querySelector('img'),
      lvElem = document.querySelector('.lv > .val'),
      questValElem = document.querySelector('.quest > .val'),
      exValElem = document.querySelector('.ex > .val'),
      goldElem = document.querySelector('.gold > .val'),
      questGauge = document.querySelector('.quest > .Gauge > b'),
      exGauge = document.querySelector('.ex > .Gauge > b'),
      lv = 1,
      questVal = 0,
      exVal = 0,
      gold = 0,
      stageVal = 1,
      lSGameData = JSON.parse(localStorage.getItem("LS_Data")),
      gameData;
      
  if(lSGameData !== null){
    lv = lSGameData.lv;
    questVal = lSGameData.questVal;
    exVal = lSGameData.exVal;
    gold = lSGameData.gold;
    stageVal = lSGameData.stageVal;
    lvElem.innerHTML = lv;
  }
  
  img.addEventListener('webkitAnimationEnd', function(){
      questImg.classList.remove('move');
  }, false);
  
  btn.addEventListener("click", function(e){
    e.preventDefault()
    questImg.classList.add('move');
    
    setQuestVal();
    setExVal();
    getGold();
    setStatus();
    setStorage();
  }, false);
  
  function setStatus(){
    
    questValElem.innerHTML = questVal;
    exValElem.innerHTML = exVal;
    goldElem.innerHTML = gold;
  
    questGauge.style.width = questVal + "%";
    exGauge.style.width = exVal + "%";
    
    if(questVal >= 100){
      questVal = 0;
      stageVal += 1;
    }
    if(exVal >= 100){
      exVal = 0;
      lv += 1;
      lvElem.innerHTML = lv;
    }
  }
  
  function setQuestVal() {
    var addQuestVal = Math.floor((100/stageVal)/4);
      questVal += addQuestVal;
      if(questVal >= 100){ questVal = 100;}
  }
  
  function setExVal(){
    var addExVal = Math.floor((100/lv)/5);
      exVal += addExVal;
      if(exVal >= 100){ exVal = 100;}
  }
  
  function getGold(){
    var rnd = Math.floor(Math.random()*4);
    
    if( rnd == 2 || rnd == 3) {
      var rndGold = (Math.floor(Math.random()*5))*5;
      
      if(rndGold == 0) { rndGold = 18; }
      var addGold = Math.floor(rndGold * (1 + (lv/10)));
      gold += addGold;
    }
  }
  
  function setStorage(){
    var gameData = {
      lv:lv,
      questVal:questVal,
      exVal:exVal,
      gold:gold,
      stageVal:stageVal
    }
    localStorage.setItem('LS_Data',JSON.stringify(gameData));
  }
  
  setStatus();
}
window.addEventListener("DOMContentLoaded", game, false);

デモページは以下のリンクから宜しくお願い致します。

デモページ

http://webcyou.com/demo/js/webstorage/index008.html

ブラウザを閉じても、同じブラウザを使用すれば以前終了したデータのまま再開することが出来ます。

次回は特別編とし、コインを手に入れた時の演出、レベルアップ演出、ステージによる背景チェンジ。を行いたいかと思います。ではでは。